//  开发环境意味着什么 ? 
// 1. 服务器
// 2. 性能
// 3. 实时可查看
var path = require("path");
var HtmlPlugin = require("html-webpack-plugin");
let ExtractTextPlugin = require("extract-text-webpack-plugin");
//用于打包完成以后自动打开默认的浏览器
//var OpenBrower = require("open-browser-webpack-plugin");

module.exports = {
      mode : "development",
      entry : {
            "scripts/main" : "./src/main.js",
            "scripts/list" : "./src/scripts/list.js",
            "scripts/slider" : "./src/scripts/slider.js",
            "scripts/register" : "./src/scripts/register.js",
            "libs/common" : "./src/libs/common.js",
            "scripts/login" : "./src/scripts/login.js",
            "scripts/detail" : "./src/scripts/detail.js",
            "scripts/detail2" : "./src/scripts/detail2.js",
            "scripts/cart" : "./src/scripts/cart.js",
            "scripts/cartdetail" : "./src/scripts/cartdetail.js"

      },
      output : {
            path : path.resolve(__dirname,"./dev"),
            filename : "[name]-[hash:4].js"
      },
      externals:{
            //可以把外部的变量或模块加载进来,比如cdn引入的jquery,想要按需模块化引入
             'jquery':'window.jQuery'
      },
      module : { // 如何处理项目中不同类型的模块
            rules : [   // 用于规定在不同模块被创建时如何处理模块的规则数组
                  {
                        test : /\.(css|scss)/,
                        // 以哪个loader进行输出; 
                        use:ExtractTextPlugin.extract({
                              fallback : "style-loader",
                                // 将css用link的方式引入就不再需要style-loader了
                              use : ["css-loader","sass-loader"]
                        })
                  },
                  {
                        test : /\.(jpg|png|gif)$/,
                        use : {
                              loader : "file-loader",
                              options : {
                                    limit:8192,
                                    name : "[name].[ext]",
                                    publicPath: "./images/",
                                    outputPath: './images/'
                              }
                        }
                  },
                  // { test: /\.(jpg|png|gif|bmp|jpeg)$/,//正则表达式匹配图片规则
                  //       use: [{
                  //       loader:'url-loader',
                  //       options:{
                  //           limit:8192,//限制打包图片的大小：
                  //           //如果大于或等于8192Byte，则按照相应的文件名和路径打包图片；如果小于8192Byte，则将图片转成base64格式的字符串。
                  //           name:'images/[name]-[hash:8].[ext]',//images:图片打包的文件夹；
                  //           //[name].[ext]：设定图片按照本来的文件名和扩展名打包，不用进行额外编码
                  //           //[hash:8]：一个项目中如果两个文件夹中的图片重名，打包图片就会被覆盖，加上hash值的前八位作为图片名，可以避免重名。
                  //       }
                  //       }
                  // {
                  //       test : /\.(js|jsx)$/,
                  //       use : {
                  //             loader : "babel-loader",
                  //             options : {
                  //                   presets : [
                  //                         "env",
                  //                   ]
                  //             }
                  //       }
                  // }
            ]
      },
      devServer : {
            //// 本地服务器所加载的页面所在的目录
            contentBase : path.resolve(__dirname,"dev"),
            host : "localhost",
            // 服务器压缩是否开启
            compress : true ,
            // 配置服务器端口号
            port : 8888,
            hot: true,
            inline: true // 实时刷新
      },
      plugins : [
            new ExtractTextPlugin('./stylesheet/index.css',{
                  allChunks:true
                }),
            new HtmlPlugin({
                  filename : "index.html",
                  template : "./src/main.html",
                  chunks: ['scripts/main','scripts/slider','scripts/list'],
                  // inject: false//允许注入的文件
            }),
            new HtmlPlugin({
                  filename : "login.html",
                  template : "./src/login.html",
                  chunks: ['libs/common','scripts/login'],
                  //inject: true
            }),
            new HtmlPlugin({
                  filename : "cartpage.html",
                  template : "./src/cartpage.html",
                  chunks: ['scripts/cartdetail'],
                  //inject: true
            }),
            new HtmlPlugin({
                  filename : "list.html",
                  template : "./src/list.html",
                  chunks :["scripts/detail","scripts/index","scripts/cart"],
                  inject: true
            }), 
            new HtmlPlugin({
                  filename : "detail.html",
                  template : "./src/detail.html",
                  chunks :["scripts/cart","scripts/detail2"],
                  inject: true
            }), 
            new HtmlPlugin({
                  filename : "register.html",
                  template : "./src/register.html",
                  chunks :["scripts/register"],
                  //inject: true
            }), 
            //new OpenBrower({ url: 'http://localhost:8888' })
      ]
}